<template>
    <el-menu
        @select="selectMenu"
        :default-active="this.$route.path"
        :collapse="isCollapse"
        @close="handleClose"
        @open="handleOpen"
        router>
<!--        :default-openeds="[0]"-->
<!--        <el-sub-menu index="w">-->
<!--            <template #title>-->
<!--                <img src="../../assets/icon/svg/个人工作平台.svg" class="menu-icon">-->
<!--                个人工作平台-->
<!--            </template>-->
<!--            <el-menu-item index="/home/personal-page">我的主页</el-menu-item>-->
<!--            <el-menu-item index="/home/process">新建流程</el-menu-item>-->
<!--            <el-sub-menu index="w3">-->
<!--                <template #title>我的任务</template>-->
<!--                <el-menu-item index="/home/task/meeting">我的会议</el-menu-item>-->
<!--            </el-sub-menu>-->
<!--            <el-sub-menu index="w4">-->
<!--                <template #title>-->
<!--                    &lt;!&ndash;                <img src="../../assets/icon/svg/个人工作平台.svg" class="menu-icon">&ndash;&gt;-->
<!--                    我发起的流程-->
<!--                </template>-->
<!--                <el-menu-item index="/home/my-apply/meeting-apply-record">我发起的会议</el-menu-item>-->
<!--                <el-menu-item index="/home/my-apply/evection-apply-record">我发起的出差申请</el-menu-item>-->
<!--            </el-sub-menu>-->
<!--            <el-menu-item index="/home/chat-room">聊天室</el-menu-item>-->
<!--        </el-sub-menu>-->
        <template v-for="(item,index) in routes">
            <menu-item :item="item" :index="index"/>
        </template>
    </el-menu>
</template>
<script>
import MenuItem from "../../components/MenuItem.vue";
import homeDefault from '../../router/home-default'
export default {
    name: "HomeMenu",
    components: {MenuItem},
    props:['account','isCollapse'],
    computed:{
        routes(){
            return homeDefault.concat(this.$store.state.routes)
            // return this.$store.state.routes;
        }
    },
    methods:{
        selectMenu(index,indexPath,item,routeResult){
            // console.log('菜单项的index：',index)
            // console.log('菜单项的indexPath：',indexPath)
            // console.log('菜单项的item：',item)
            // console.log('菜单项的routeResult：',routeResult)
        },
        handleClose(){

        },
        handleOpen(){

        },
    }
}
</script>

<style scoped>
.title{
    font-size: 32px;
    font-family: 'STCaiyun';
    letter-spacing: 6px;
    color: white;
}
.menu-icon{
    width: 24px;
    margin-right: 10px;
}
.icon{
    width: 30px;
    height: 30px;
    background-size: 28px 28px;
    background-position: 2px 2px;
    background-repeat: no-repeat;
    margin-right: 10px;
}
</style>
